<template>
  <view class="card">
    <view class="card-left">
      <image
        class="card-left-img"
        src="/pagesB/static/img/coupon/coupon_bg.png"
      />
      <view class="card-left-main">
        <view class="card-left-box">
          <view class="card-left-box-unit">￥</view>
          <view class="card-left-box-price">{{ info.money }}</view>
        </view>
        <view class="card-left-title">优惠券</view>
      </view>
    </view>
    <view class="card-right">
      <view class="card-right-top">
        <view class="card-right-title textMaxOneLine">{{ info.name }}</view>
        <view>优惠</view>
      </view>
      <view class="card-right-line"></view>
      <view class="card-right-bottom">
        <view>{{ $u.timeFormat(info.time, "yyyy-mm-dd hh:MM:ss") }}</view>
        <view class="card-right-remain"
          >剩余{{ info.remain_num }}/{{ info.total }}张</view
        >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    info: { type: Object, default: {} },
  },
  data() {
    return {};
  },

  methods: {},
  onLoad() {},
};
</script>


<style scoped  lang='scss'>
.card {
  height: 210rpx;
  display: flex;
  justify-content: space-between;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  &-left {
    flex: 0 0 315rpx;
    position: relative;
    &-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 10rpx 0 0 10rpx;
      z-index: 0;
    }
    &-main {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      z-index: 1;
    }
    &-box {
      display: flex;
      align-items: flex-end;

      &-unit {
        font-size: 30rpx;
      }
      &-price {
        font-size: 48rpx;
      }
    }
    &-title {
      font-size: 28rpx;
    }
  }
  &-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #757575;
    padding: 16rpx 16rpx 24rpx 28rpx;
    box-sizing: border-box;
    &-top {
      flex: 0 0 46%;
      font-size: 26rpx;
    }
    &-bottom {
      flex: 0 0 46%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 26rpx;
    }
    &-remain {
      flex-shrink: 0;
    }
    &-title {
      color: #5b5b5b;
      font-size: 30rpx;
      font-weight: 700;
    }
    &-line {
      flex: 1;
      margin: 10rpx 0;
      border-top: 2rpx dashed #e3e3e3;
    }
  }
}
</style>